<nb-auth-block>
    <h2 class="title">登陆</h2>
    <small class="form-text sub-title">您好，请使用用户名或者邮箱登陆</small>

    <form (ngSubmit)="login()" #form="ngForm" autocomplete="nope">

        <div *ngIf="showMessages.error && errors && errors.length > 0 && !submitted" class="alert alert-danger" role="alert">
            <div>
                <strong>Oh snap!</strong>
            </div>
            <div *ngFor="let error of errors">{{ error }}</div>
        </div>

        <div *ngIf="showMessages.success && messages && messages.length > 0 && !submitted" class="alert alert-success" role="alert">
            <div>
                <strong>Hooray!</strong>
            </div>
            <div *ngFor="let message of messages">{{ message }}</div>
        </div>

        <div class="form-group">
            <label for="input-email" class="sr-only">邮箱</label>
            <input name="email" [(ngModel)]="user.email" id="input-email" pattern=".+@.+\..+" class="form-control" placeholder="邮箱"
                #email="ngModel" [class.form-control-danger]="email.invalid && email.touched" autofocus [required]="true">
            <small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.required">
                邮箱必填！
            </small>
            <small class="form-text error" *ngIf="email.invalid && email.touched && email.errors?.pattern">
                邮箱格式不对！
            </small>
        </div>

        <div class="form-group">
            <label for="input-password" class="sr-only">密码</label>
            <input name="password" [(ngModel)]="user.password" type="password" id="input-password" class="form-control" placeholder="密码"
                #password="ngModel" [class.form-control-danger]="password.invalid && password.touched" [required]="true" [minlength]="6"
                [maxlength]="18">
            <small class="form-text error" *ngIf="password.invalid && password.touched && password.errors?.required">
                密码必填！
            </small>
            <small class="form-text error" *ngIf="password.invalid && password.touched && (password.errors?.minlength || password.errors?.maxlength)">
                密码为6到18位！
            </small>
        </div>

        <div class="form-group accept-group col-sm-12">
            <nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe">记住我</nb-checkbox>
            <a class="forgot-password" routerLink="../request-password">忘记密码?</a>
        </div>

        <button [disabled]="submitted || !form.valid" class="btn btn-block btn-hero-success" [class.btn-pulse]="submitted">
            登陆
        </button>
    </form>

    <div class="links">
        <small class="form-text">联系我们:</small>

        <div class="socials">
            <a href="https://gitee.com/now.wl" target="_blank" class="socicon-github"></a>
            <a href="https://gitee.com/now.wl" target="_blank" class="socicon-facebook"></a>
            <a href="https://gitee.com/now.wl" target="_blank" class="socicon-twitter"></a>
        </div>

        <small class="form-text">
          没有账号？
            <a routerLink="../register">
                <strong>注册</strong>
            </a>
        </small>
    </div>
</nb-auth-block>